<%@ page import="stu.sup.util.JsonResult" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/layui/layui-v2.5.6/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css">

</head>
<body>
<div class="login-nav" style="width: 80%;margin: 0 auto;">
    <img src="../img/logo.png" alt="" srcset="">
</div>

<div class="layui-container" style="width: 100%;height: 500px;;margin: 0 auto;background-image: url(../img/background-login.jpg);background-size: cover;">
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="body">
                <span class="welcome">你好!请注册</span><br>
                <span class="userName">新鲜生活每一天</span>
                <img src="../img/水果.png">
                <button class="button login" onclick="dl()">登录</button>
                <button class="button register" onclick="zc()">注册</button>
                <script>
                    function dl() {
                        window.location.href="${pageContext.request.contextPath}/login";
                    }
                    function zc() {
                        window.location.href="${pageContext.request.contextPath}/register";
                    }
                </script>
            </div>
        </div>
        <div class="layui-col-md4 layui-form">
            <div class="login-body">
                <div class="login bg-black" style="height: 200px;margin-top: 100px;">
                    <form class="layui-form bg-blue" action="" >
                        <h1 style="margin-bottom: 10px;margin-left: 100px;">用户登录</h1>
                        <div class="layui-form-item margin-top-10">
                            <label class="layui-form-label">用户名
                                <i class="layui-icon">&#xe66f;</i>
                            </label>
                            <div class="layui-input-inline">
                                <!-- //采用inline表示可以继续放 -->
                                <input type="username" id="username" name="username" required lay-verify="username" placeholder="请输入用户名" autocomplete="off" class="layui-input user-name" lay-verType="msg">
                            </div>
                            <!-- <div class="layui-form-mid layui-word-aux"></div> -->
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码
                                <i class="layui-icon"> &#xe672;</i>
                            </label>
                            <div class="layui-input-inline">
                                <input type="password" id="password" name="password" required lay-verify="userpassword" placeholder="请输入密码" autocomplete="off" class="layui-input user-pwd">
                            </div>
                            <!-- <div class="layui-form-mid layui-word-aux"></div> -->
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">记住密码<i class="layui-icon"> &#xe679;</i> </label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="switch" lay-skin="switch">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">身份类别<i class="layui-icon">&#xe770;</i></label>
                            <div class="layui-input-block">
                              <input type="radio" name="kinds" value="1" title="用户" checked>
                              <input type="radio" name="kinds" value="0" title="商家">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button id="login-btn" class="layui-btn" lay-submit lay-filter="login">登录</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">其他方式</label>
                            <div class="layui-input-block">
                                <i class="layui-icon" style="font-size: 33px;"> &#xe676;</i>
                                <i class="layui-icon" style="font-size: 33px;"> &#xe677;</i>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="${pageContext.request.contextPath}/plugins/layui/layui-v2.5.6/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/plugins/jquery/jquery-3.4.1.js"></script>

<script>
    $("#login-btn").click(function () {

        var username = $(".user-name").val();  //登录名
        var password = $(".user-pwd").val(); //登陆密码

        let kinds = $("input[name='kinds']:checked").val();//用户类型

        console.log("username=" + username);
        console.log("password=" + password);
        console.log("kinds="+kinds)

        if (username !="" && password!=""){
            console.log("loging......");
            $.ajax({
                url: "${pageContext.request.contextPath}/view/login",
                type: "POST",
                data: {
                    username : $.trim($("#username").val()),
                    password : $.trim($("#password").val()),
                    "kinds":kinds
                },//将数据传输到服务器
                dataType: "JSON",
                success:function (result){
                    console.log("result.code =" + result.code);
                    if (result.code == 1) {
                        console.log("code = 1");
                        window.location.href = "${pageContext.request.contextPath}/index"
                    }else if (result.code == 0){
                        console.log("code = 0,商家登录");
                        window.location.href = "${pageContext.request.contextPath}/merchant"
                    }else {
                        alert("登录失败");
                    }
                }
            })
        }
        return false;
    });


</script>

<script>
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>